<template>
  <div>
    <div style="width: 100%; background: #fff; padding: 17px 32px 0 32px">
      <a-breadcrumb>
        <a-breadcrumb-item>上门服务</a-breadcrumb-item>
        <a-breadcrumb-item><a href="javascipt:;" @click="$router.back()">商品列表</a></a-breadcrumb-item>
        <a-breadcrumb-item v-if="isCopy">添加商品</a-breadcrumb-item>
        <a-breadcrumb-item v-else>{{ isEdit ? '编辑' : '添加' }}商品</a-breadcrumb-item>
        <h4
          style="
            padding-top: 17px;
            margin-bottom: 10px;
            font-size: 20px;
            font-family: PingFangSC-Medium;
            line-height: 28px;
          "
        >
          {{ isCopy ? '添加商品' : goodsId ? '编辑商品' : '添加商品' }}
        </h4>
      </a-breadcrumb>

      <a-tabs v-model="activeTab">
        <a-tab-pane key="1" tab="基础信息"></a-tab-pane>
        <a-tab-pane key="2" tab="图文设置"></a-tab-pane>
        <!-- <a-tab-pane key="3" tab="规格库存"></a-tab-pane> -->
        <a-tab-pane key="4" tab="服务人员"></a-tab-pane>
      </a-tabs>
    </div>
    <!-- 表单区域 -->
    <a-card style="margin: 24px" :bordered="false">
      <a-form
        action=""
        method="post"
        @submit="submitAdd"
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <!-- 基础信息 -->
        <div v-show="activeTab == 1">
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            基础信息
          </h4>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="一键采集">
            <a-input-search
              style="width: 468px"
              :placeholder="'请输入需要采集的商品地址'"
              :loading="copyLoading"
              enter-button="商品拉取"
              @search="goodsCopy"
              v-model="copyVal"
            >
            </a-input-search>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商品名称" hasFeedback>
            <a-input
              style="width: 468px"
              v-decorator="[
                'name',
                {
                  rules: [
                    { required: true, message: '请填写商品名称' },
                    { max: 200, message: '商品名称不能大于200个字符' },
                  ],
                },
              ]"
              placeholder="请填写商品名称"
            />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="商品特色"
            hasFeedback
            help="例子：正品保障,极速发货,7天退换货。多个请使用英文逗号,分隔"
          >
            <a-input
              style="width: 468px"
              v-decorator="[
                'desc',
                {
                  rules: [{ required: true, message: '请填写商品特色' }],
                },
              ]"
              placeholder="请填写商品特色"
            />
          </a-form-item>
          <a-form-item :hidden="true" :labelCol="labelCol" :wrapperCol="wrapperCol" label="商品ID" hasFeedback>
            <a-input v-decorator="['id']" type="number" :step="1" suffix="件" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商品分类" hasFeedback>
            <a-select
              style="width: 468px"
              v-decorator="['worker_goods_cat_id', { rules: [{ required: true, message: '请选择商品分类' }] }]"
              placeholder="请选择商品分类"
            >
              <a-select-option v-for="item of catList" :key="item.id" :value="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="关键字"
            help="能准确搜索到该商品 比如：海尔电视|电视"
            hasFeedback
          >
            <a-input
              style="width: 468px"
              v-decorator="[
                'key_word',
                {
                  rules: [
                    { required: false, message: '请填写关键字' },
                    { max: 200, message: '关键字不能大于200个字符' },
                  ],
                },
              ]"
              placeholder="请填写关键字"
            />
          </a-form-item>
          <a-divider />

          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            价格设置
          </h4>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="售价" hasFeedback>
            <a-input
              style="width: 468px"
              v-decorator="[
                'price',
                {
                  rules: [
                    { required: true, message: '填写售价' },
                    { pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/, message: '价格格式不正确' },
                  ],
                },
              ]"
              type="number"
              :step="0.01"
              prefix="￥"
              suffix="元"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="原价" hasFeedback>
            <a-input
              style="width: 468px"
              v-decorator="['original_price']"
              type="number"
              :step="0.01"
              prefix="￥"
              suffix="元"
            />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="服务内容"
            help="例子：正品保障,极速发货,7天退换货。多个请使用英文逗号,分隔"
            hasFeedback
          >
            <a-input style="width: 468px" v-decorator="['service']" placeholder="请填写服务内容" />
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="已出售量"
            help="前端展示的销量=实际销量+已出售量"
            hasFeedback
          >
            <a-input
              style="width: 468px"
              v-decorator="[
                'virtual_sales',
                {
                  rules: [
                    { required: false, message: '填写已出售量' },
                    { pattern: /((^[1-9]\d*)|^0)(\.\d{0,0}){0,1}$/, message: '已出售量不正确' },
                  ],
                },
              ]"
              type="number"
              :step="1"
              suffix="件"
            />
          </a-form-item>
          <a-divider />
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            商品设置
          </h4>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="支付模式">
            <a-radio-group
              @change="(e) => changeRadio(e, 'payment_type')"
              v-decorator="[
                'payment_type',
                {
                  rules: [{ required: true, message: '请选择支付模式' }],
                },
              ]"
              :default-value="0"
            >
              <a-radio :value="0"> 全款 </a-radio>
              <a-radio :value="1"> 定金 </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item v-if="showFinalProfit" :labelCol="labelCol" :wrapperCol="wrapperCol" label="尾款比例">
            <a-input
              style="width: 468px"
              v-decorator="[
                'final_profit',
                {
                  rules: [
                    { required: true, message: '填写尾款比例' },
                    { pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/, message: '尾款比例格式不正确' },
                  ],
                },
              ]"
              type="number"
              :step="0.01"
              suffix="%"
            />
          </a-form-item>

          <a-divider />
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            预定须知
          </h4>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预定须知">
            <WangEditor :value="goodsInfo.warn" @change="(e) => onDescChange('warn', e)"></WangEditor>
            <a-textarea
              :hidden="true"
              v-decorator="['warn', { rules: [{ required: true, message: '请输入预定须知' }] }]"
            />
          </a-form-item>
        </div>
        <!-- 图文设置 -->
        <div v-show="activeTab == 2">
          <h4 style="font-size: 16px; font-family: PingFangSC-Medium; line-height: 24px; color: rgba(0, 0, 0, 0.85)">
            商品图片
          </h4>
          <a-form-item required :labelCol="labelCol" :wrapperCol="wrapperCol" label="商品图片" hasFeedback>
            <!-- 上传图片 -->
            <cyyUploadImg
              @uploadSuccess="selectPic"
              @deleteImg="delPic"
              :imgList.sync="goodsInfo.goods_pic_list"
              dataType="list"
            >
            </cyyUploadImg>
          </a-form-item>
          <!-- v-if="goodsInfo.video_url != 0" -->
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商品视频" hasFeedback>
            <!-- 上传视频 -->
            <cyyUploadVideo
              :videoSrc="goodsInfo.video_url"
              @uploadSuccess="goodsVideoCb"
              @deleteVideo="
                () => {
                  goodsInfo.video_url = ''
                }
              "
            ></cyyUploadVideo>
          </a-form-item>
          <a-divider />
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            商品详情
          </h4>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="图文详情">
            <WangEditor :value="goodsInfo.content" @change="(e) => onDescChange('content', e)"></WangEditor>
            <a-textarea
              :hidden="true"
              v-decorator="['content', { rules: [{ required: true, message: '请输入图文详情' }] }]"
            />
          </a-form-item>
        </div>
        <!-- 规格库存 -->
        <!-- <div v-show="activeTab == 3">
          <h1 class="form-title">商品库存</h1>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商品库存" hasFeedback>
            <a-input
              placeholder="请填写库存"
              style="width: 468px"
              v-decorator="[
                'goods_num',
                {
                  rules: [
                    { required: true, message: '请填写库存' },
                    { pattern: /((^[1-9]\d*)|^0)(\.\d{0,0}){0,1}$/, message: '库存不正确' },
                  ],
                },
              ]"
              type="number"
              :step="1"
              suffix="件"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商品货号" hasFeedback>
            <div class="item-table">
              <a-input
                style="width: 468px"
                placeholder="请填写商品货号"
                v-decorator="['goods_no', { rules: [{ max: 100, message: '最大100个字符' }] }]"
              />
            </div>
          </a-form-item>
          <el-divider style="margin: 24px 0"></el-divider>
        </div> -->
        <!-- 服务人员 -->
        <div v-show="activeTab == 4">
          <h1 class="form-title">服务人员设置</h1>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="绑定服务人员">
            <a-radio-group
              @change="showBindWorkerF"
              :default-value="1"
              v-decorator="[
                'bind_worker',
                {
                  rules: [{ required: true, message: '请选择' }],
                },
              ]"
            >
              <a-radio :value="1"> 开启 </a-radio>
              <a-radio :value="0"> 关闭 </a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item
            v-if="showBindWorker"
            required
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="选择服务人员"
          >
            <a-button type="primary" style="margin-bottom: 20px" @click="open('popSelectUser')"> 添加人员 </a-button>
            <pageUser ref="pageUser" :items="worker_list" @remove="(i) => worker_list.splice(i, 1)"></pageUser>
          </a-form-item>
        </div>

        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button :loading="butLoading" type="primary" html-type="submit"> 保存 </a-button>
        </a-form-item>
      </a-form>

      <popSelectUser ref="popSelectUser" @select="selectUser"></popSelectUser>
    </a-card>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import pick from 'lodash.pick'
import { save, edit, Copy } from '@/api/goods/goods'
import { goodsCatList as catListApi } from '@/api/marketing/serviceHome'
import { STable, WangEditor } from '@/components'

import { cyyUploadVideo, cyyUploadImg } from '@/components/CyyUi/index'
import popSelectUser from './components/pop-select-user.vue'
import pageUser from './components/page-user.vue'
import { selectWorkerList } from '@/api/marketing/serviceHome'

const goodsInfo = {
  id: 0,
  name: '',
  key_word: '',
  price: '',
  original_price: '',
  service: '',
  freight: '',
  pieces: '',
  forehead: '',
  video_url: '',
  content: '',
  goods_pic_list: [],
  goods_num: 0,
  goods_no: '',
  use_attr: '0',
  product_type: '6',
  cover_pic: '',
  individual_share: '0',
  share_type: '0',
  worker_goods_cat_id: '',
  desc: '',
  payment_type: 0,
  final_profit: '',
  bind_worker: 1,
  warn: '',
}

export default {
  components: {
    quillEditor,
    STable,
    WangEditor,
    cyyUploadVideo,
    cyyUploadImg,
    popSelectUser,
    pageUser,
  },
  data() {
    return {
      addType: 'text',
      activeTab: '1',
      copyType: 0,
      copyLoading: false,
      copyVal: '',
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 21 },
      },
      butLoading: false,
      isAttr: 0,
      productType: 6,
      shareType: 0,
      goodsInfo: {},
      catList: [],
      GoodsAttr: [], // 遍历后商品提交规格
      goodsId: 0,
      isCopy: false,

      worker_ids: '',
      worker_list: [],
      showFinalProfit: false,

      showBindWorker: true,
    }
  },
  created() {
    this.getCatList()
    var goodsId = this.$route.query.id ? this.$route.query.id : 0
    this.goodsId = goodsId

    this.getGoodsData(goodsId)
    if (Boolean(this.$route.query.isCopy) && this.$route.query.isCopy !== 'false') {
      this.isCopy = true
    }
  },
  computed: {
    isEdit() {
      return !!this.$route.query.id
    },
  },
  watch: {
    $route: function (val) {
      this.getCatList()
      if (val.query.id > 0) {
        this.getGoodsData(val.query.id)
      } else {
        this.goodsInfo = goodsInfo
      }
    },

    goodsInfo() {
      this.updateData()
    },
  },
  methods: {
    showBindWorkerF(e) {
      if (e) {
        let { value } = e.target
        if (value) {
          this.showBindWorker = true
        } else {
          this.showBindWorker = false
        }
      }
    },

    goodsVideoCb(e) {
      this.goodsInfo.video_url = e.data
    },

    submitAdd(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          if (!this.goodsInfo.goods_pic_list.length) {
            this.$message.error('请上传商品图片！')
            return
          }
          this.butLoading = true
          values.cover_pic = this.goodsInfo.goods_pic_list[0].pic_url
          values.video_url = this.goodsInfo.video_url
          values.goods_pic_list = this.goodsInfo.goods_pic_list
          values.worker_ids = this.worker_list.map((el) => el.id).join(',')

          if (values.productType === undefined) {
            values.product_type = this.productType
          }

          if (this.isCopy) {
            delete values.id
          }

          save(values).then((res) => {
            this.butLoading = false
            if (res.code == 0) {
              this.form.setFieldsValue({
                id: 0,
                name: '',
                key_word: '',
                price: '',
                original_price: '',
                service: '',
                freight: '',
                pieces: '',
                forehead: '',
                video_url: '',
                content: '',
                goods_pic_list: [],
                goods_num: 0,
                goods_no: '',
                integral: { give: 0, forehead: 0, more: '0' },
                use_attr: '0',
                cover_pic: '',
                individual_share: '0',
                share_type: '0',
                worker_goods_cat_id: [],
                desc: '',
                payment_type: 0,
                final_profit: '',
                bind_worker: 1,
                warn: '',
              })
              this.goodsInfo.goods_pic_list = []
              this.goodsInfo.video_url = ''

              if (this.type === 'cloud') {
                this.$router.push({ name: 'goodsCloudList' })
              } else {
                this.$router.go(-1)
              }

              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
          this.butLoading = false
        } else {
          console.log(err)
          for (const key in err) {
            this.$message.error(err[key].errors[0].message)
          }
        }
      })
    },

    getGoodsData(goodsId) {
      const hide = this.$message.loading('加载中', 0)
      edit({ id: goodsId }).then((res) => {
        console.log(res.data, 'info')

        if (res.data.info && res.data.info.id > 0) {
          this.goodsInfo = res.data.info
        } else {
          this.goodsInfo = goodsInfo
        }

        this.goodsInfo.worker_goods_cat_id = String(this.goodsInfo.worker_goods_cat_id)

        if (res.data.info && res.data.info.worker_ids) this.selectWorkerList(res.data.info.worker_ids)
        this.updateData()

        hide()
      })
    },

    async selectWorkerList(worker_ids) {
      const res = await selectWorkerList({
        worker_ids,
      })
      if (!res.code) {
        this.worker_list = res.data.data || []
      }
    },

    updateData() {
      this.shareType = this.goodsInfo.share_type
      if (this.goodsInfo.payment_type === 1) this.showFinalProfit = true
      if (this.goodsInfo.bind_worker === 0) this.showBindWorker = false
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(this.goodsInfo, [
            'id',
            'name',
            'key_word',
            'price',
            'rate',
            'original_price',
            'service',
            'freight',
            'pieces',
            'forehead',
            'content',
            'goods_num',
            'goods_no',
            'use_attr',
            'product_type',
            'individual_share',
            'share_type',
            'worker_goods_cat_id',
            'confine_count',
            'virtual_sales',
            'desc',
            'payment_type',
            'final_profit',
            'bind_worker',
            'warn',
          ])
        )
      })
    },

    onDescChange(el, content) {
      this.form.setFieldsValue({
        [el]: content,
      })
    },

    getCatList() {
      catListApi().then((res) => {
        this.catList = res.data.list
      })
    },

    goodsCopy() {
      if (this.copyVal == '') {
        this.$message.warning('请输入需要采集的商品地址')
        return
      }
      this.copyLoading = true
      const hide = this.$message.loading('拉取中', 0)

      Copy({
        url: this.copyVal,
      })
        .then((res) => {
          if (res.code === 0) {
            var goods = this.goodsInfo
            delete goods.id
            this.goodsInfo = {}
            const pic = []
            goods.content = res.data.desc
            res.data.pics.forEach((item) => {
              pic.push({ pic_url: item })
            })
            // goods.cover_pic = res.data.pic_url
            goods.goods_pic_list = pic
            if (res.data.price) {
              goods.price = res.data.price
            }

            if (res.data.video) {
              goods.video_url = res.data.video
            }

            goods.virtual_sales = res.data.vagueSellCount

            if (res.data.marketPrice) {
              goods.original_price = res.data.marketPrice
            }

            goods.name = res.data.title

            goods.use_attr = res.data.attr.length > 0 ? '1' : '0'
            this.goodsInfo = goods
            this.updateData()
          }
        })
        .catch((error) => {
          this.$message.error('网络错误，请重试')
          console.log(error)
        })
        .then(() => {
          hide()
          this.copyLoading = false
        })
      // }
    },

    delPic(e) {
      this.goodsInfo.goods_pic_list.splice(e.index, 1)
    },

    selectPic(e) {
      this.goodsInfo.goods_pic_list = this.goodsInfo.goods_pic_list ? this.goodsInfo.goods_pic_list : []
      e.data.forEach((ele) => {
        this.goodsInfo.goods_pic_list.push({ pic_url: ele })
      })
    },

    open(el) {
      this.$refs[el].visible = true
    },

    selectUser(item) {
      let { worker_list } = this

      if (!worker_list.find((el) => el.id === item.id)) {
        worker_list.push(item)
      }
    },

    changeRadio(e, el) {
      if (e) {
        let { value } = e.target

        switch (el) {
          case 'payment_type':
            if (value === 1) {
              this.showFinalProfit = true
            } else {
              this.showFinalProfit = false
            }
            break

          default:
            break
        }
      }
    },
  },
}
</script>
<style scoped lang="less">
.item-table {
  width: 100%;
  max-width: 1000px;
  display: inline-block;
}
.item-colunm-content {
  /deep/.ant-checkbox-group {
    display: flex;
    align-items: center;
    label {
      margin-top: 6px;
    }
  }
}
/deep/.ant-form-explain {
  margin-top: 10px;
}
/deep/.ant-tabs-bar {
  margin: 0;
}
/deep/.ant-tabs-nav .ant-tabs-tab {
  padding: 10px 0;
  margin: 0 49px 0 0;
}
.required::before {
  content: '*';
  color: red;
}
td {
  padding: 0 6px;
}
th {
  padding: 0 6px;
}
tr:hover {
  background: #f0f0f0;
}
.goods_pic_item {
  width: 80px;
  height: 80px;
  border-radius: 3px;
}

.upload-box {
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px dashed rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  .upload-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .self-com {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 111;
    /deep/.ant-btn {
      width: 104px;
      height: 103px;
    }
    /deep/.ant-input-group-wrapper {
      width: 104px;
      height: 104px;
      .ant-input-group {
        width: 100%;
        height: 100%;
        span:nth-child(1) {
          display: none;
        }
        span:nth-child(3) {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
    }
  }
}

.video-box {
  width: 104px;
  height: 104px;
  position: relative;
  background: rgba(0, 0, 0, 0.05);
  border: 1px dashed rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  margin-left: 8px;
  video {
    width: 100%;
    height: 100%;
  }
  .action-hover {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 11;
    display: none;
    opacity: 0;
    transition: all 0.3s;
    background-color: #000000;
    opacity: 0.4;

    .hover-bg {
      width: 100%;
      height: 100%;
      // background-color: #000000;
      // opacity: 0.4;
    }
    .hover-body {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 11;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .action-icons {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px;
      .anticon {
        color: #ffffff;
        font-size: 17px;
      }
      .anticon:nth-child(1) {
        margin-right: 10px;
      }
    }
  }
}
.video-box:hover > .action-hover {
  display: block;
}

.goods_pic_item_box {
  width: 80px;
  height: 80px;
  box-shadow: 0 0 5px rgba(170, 170, 170, 0.671);
  border-radius: 3px;
  position: relative;
  margin-right: 10px;
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  float: left;
  margin: 0 8px 0 0px;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  .upload-img-box {
    width: 88px;
    height: 88px;
    position: relative;
    .action-hover {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 11;
      display: none;
      opacity: 0;
      transition: all 0.3s;

      .hover-bg {
        width: 100%;
        height: 100%;
        background-color: #000000;
        opacity: 0.4;
      }
      .hover-body {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 11;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .action-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px;
        .anticon {
          color: #ffffff;
          font-size: 17px;
        }
        .anticon:nth-child(1) {
          margin-right: 10px;
        }
      }
    }
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .upload-img-box:hover > .action-hover {
    display: block;
    opacity: 1;
  }
}

.distribution-table {
  /deep/.ant-table-small {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
    border-radius: 4px;
    .ant-table-body {
      padding: 10px 0;
      margin: 0 12px;
      .ant-table-thead {
        height: 54px;
        background: #fafafa;
        border-radius: 4px 4px 0px 0px;
        border-bottom: 1px solid#E8E8E8;
      }
      tr {
        td {
          padding-top: 15px !important;
          padding-bottom: 15px !important;
        }
      }
    }
  }
}

.goods_pic_item_box .icon {
  position: absolute;
  top: 2px;
  right: 2px;
  /* margin-right: 10px; */
}
.timeSlot {
  display: flex;
  align-items: center;
}
.timePrice div {
  display: flex;
  align-items: center;
  span {
    margin-right: 10px;
    width: 100px;
    min-width: 60px;
  }
}
.tips {
  display: flex;
  flex-direction: column;
  color: #d9534f;
  font-size: 14px;
  span {
    line-height: normal;
  }
}
.add {
  display: inline-block;
  position: relative;
  .add-action {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    /* height: 29px; */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    cursor: pointer;
    border-left: 0;
  }
}
.warning {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 10px;
}
.table {
  width: 100%;
  margin-top: 36px;
  padding: 10px 12px;

  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  .table-body {
    .ant-row {
      min-height: 54px;
      opacity: 1;
      border-radius: 4px 4px 0px 0px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e8e8e8;
    }
    .self-th {
      background: #fafafa;
    }
  }
  .title {
    .ant-col {
      text-align: center;
      padding: 0 10px;
      font-size: 14px;
      font-family: PingFangSC-Medium;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}
.list {
  .item {
    background-color: #fff;
    padding: 5px;
    display: flex;
    align-items: center;
    .ant-col {
      text-align: center;
      padding: 0 10px;
    }
  }
}
.tr-row:hover {
  background-color: #e6f7ff;
}

.tip {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: normal;
  text-align: left;
}
.form-title {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.85);
}
.lable-margin24 {
  .ant-form-item-label {
    margin: 24px 0;
  }
}
.guige-table {
  /deep/.ant-table-thead {
    background: #fafafa;
  }
}

.guige-label {
  color: rgba(0, 0, 0, 0.85);
  text-align: right;
}

// 搜索input
.add-guige {
  /deep/.ant-input-wrapper {
    .ant-input {
      width: 172px;
      height: 28px;
    }
    .ant-input-search-button {
      height: 28px;
      line-height: 28px;
      width: 28px;
      text-align: center;
      background: #fff;
      color: rgba(0, 0, 0, 0.45);
      border-color: rgb(217, 217, 217);
    }
  }
}

.inpBox {
  position: relative;
  display: flex;
  align-items: center;
}

.tableScroll {
  overflow-x: auto;
  table {
    min-width: 100%;
  }
}
</style>
